<script setup lang="ts">
import { ref } from "vue";
import modify from "./components/Modify.vue"
import modify1 from "./components/Modify1.vue"

let flag = false

const userName = ref('')
const userEmail = ref('')
const userHobby = ref('')
let tipText = ref('')

function input_btn(){
    flag = true
    tipText.value = `用户名是：${userName.value} \n 邮箱是：${userEmail.value} \n 爱好是：${userHobby.value}`
}

function out(){
    userName.value = ''
    userEmail.value = ''
    userHobby.value =''
}

function up(newName: string, newEmail: string, newHobby: string){
  console.log('收到更新事件', {newName, newEmail, newHobby} );
  userName.value = newName;
  userEmail.value = newEmail;
  userHobby.value = newHobby;
}
</script>

<template>
    <div id="input">
        <h1>用户信息输入</h1>
        <div id="user_input">
            <label>用户名：</label>
            <input id="name" placeholder="请输入用户名" type="text" v-model="userName"/>
            <br>
            <label>邮箱：</label>
            <input id="email" placeholder="请输入邮箱" type="text" v-model="userEmail"/>
            <br>
            <label>爱好：</label>
            <input id="hobby" placeholder="请输入爱好" type="text" v-model="userHobby"/>
            <br>
            <button id="input_btn" @click="input_btn">录入信息</button>

            <div class="tip_box" v-show="flag">{{ tipText }}</div>

            <modify  v-model:userName="userName" v-model:userEmail="userEmail" v-model:userHobby="userHobby" ></modify>
            <modify1 @log_out="out" @update="up" :name="userName" :email="userEmail" :hobby="userHobby"></modify1>
        </div>
    </div>
</template>

<style scoped>

</style>
